import React,{Component} from 'react';
import './home.css';
import axios from '../../plugins/axios'
import HdbSwiper from "../../components/hdb-swiper";
import HdbCell from "../../components/hdb-cell";
import {queryAll, queryBanner, queryHome} from "../../services/product";


export default class  Home extends Component{
    state={
        banner:[],
        home:[]
    };



    /*componentDidMount(){
      queryAll([queryBanner(),queryHome()]).then(
        ({banner:{data:{data}},home})=>this.setState({banner:data,home:home.data.data})
      )
    }*/


    async componentDidMount(){
        let {banner,home} = await queryAll([queryBanner(),queryHome()]);
        this.setState({banner:banner.data.data,home:home.data.data})
    }





    render(){
        console.log('home render')

        let {banner,home}=this.state;
        return (
            <div className="container">

                <HdbSwiper
                    data={banner}
                    to={{pathname:'/detail',apiname:'banner'}}
                />

                {
                    home.map((item,index)=>(
                        <HdbCell
                            key={item.id}
                            index={index}
                            title={item.title}
                            label={item.des}
                            to={{pathname:`/detail/${item.id}`,search:{apiname:'home'}}}
                        />
                    ))
                }

            </div>
        )
    }
}